<template>
  <div class="app-container calendar-list-container">
    <el-row>
      <el-col :span="5" style="margin-right:10px">
        <div class="lesson-cate">
          <div class="lesson-cate-title">课程分类</div>
          <div class="lesson-cate-content">
            <ul>
              <template>
                <li v-for="item in cateList" :key="item.class_2_id" @click="changeCate(item.class_2_id)" v-bind:class="{ active: item.class_2_id === class_2_id }">
                  <p>{{item.class_2_name}}</p>
                  <p>{{item.class_1_name}}</p>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="6"  style="margin-right:10px">
        <div class="lesson-cate">
          <div class="lesson-cate-title">一级阶段</div>
          <div class="lesson-cate-content">
            <ul>
              <template>
                <li v-for="(item,index) in firstStageList" :key="item.id" v-bind:class="{ active: item.id === class_3_id }">
                  <p class="stage-text" v-show="!item.editFlag&&!item.addFlag" @click="changeFirst(item.id)">{{item.class_name}}</p>
                  <el-input class="input-width" v-model="item.class_name" v-show="item.editFlag" placeholder="请输入阶段名称" v-on:blur="updateFirstName(index,item)"></el-input>
                  <el-input class="input-width" v-model="item.class_name" v-show="item.addFlag" placeholder="请输入阶段名称" v-on:blur="addFirstName(index,item)"></el-input>
                  <span class="span-icon" @click="handleFirstName(index,item)"><i class="el-icon-edit" v-show="!item.addFlag&&!item.editFlag"></i></span>
                  <span class="span-icon" @click="deleteFirstName(index,item)"><i class="el-icon-circle-close" v-show="item.closeFlag"></i></span>
                </li>
              </template>
            </ul>
            <div class="plus-div">
              <el-button class="plus-btn" @click="addFirstStage"><i class="el-icon-plus"></i></el-button>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="margin-right:10px">
        <div class="lesson-cate">
          <div class="lesson-cate-title">二级阶段</div>
          <div class="lesson-cate-content">
            <ul>
              <template>
                <li v-for="(item,index) in secondStageList" :key="item.id" v-bind:class="{ active: item.id === class_3_id }">
                  <p class="stage-text" v-show="!item.editFlag&&!item.addFlag">{{item.class_name}}</p>
                  <el-input class="input-width" v-model="item.class_name" v-show="item.editFlag" placeholder="请输入阶段名称" v-on:blur="updateSecondName(index,item)"></el-input>
                  <el-input class="input-width" v-model="item.class_name" v-show="item.addFlag" placeholder="请输入阶段名称" v-on:blur="addSecondName(index,item)"></el-input>
                  <span class="span-icon" @click="handleSecondName(index,item)"><i class="el-icon-edit" v-show="!item.addFlag&&!item.editFlag"></i></span>
                  <span class="span-icon" @click="deleteSecondName(index,item)"><i class="el-icon-circle-close" v-show="item.closeFlag"></i></span>
                </li>
              </template>
            </ul>
            <div class="plus-div">
              <el-button class="plus-btn" @click="addSecondStage"><i class="el-icon-plus"></i></el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
  .el-time-spinner__wrapper {
    vertical-align: inherit;
  }
  .filter-container .filter-item {
    margin-bottom: 4px;
  }
  .el-input {
    width: 200px;
  }
  .lesson-cate {
    width: 100%;
    min-height: 50vh;
    border: solid 1px #ebeef5;
  }
  .lesson-cate-title {
    padding: 0 15px;
    font-size: 14px;
    color: #999;
    line-height: 50px;
    border-bottom: solid 1px #ebeef5;
  }
  .lesson-cate-content ul {
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-padding-start: 0px;
  }
  .lesson-cate-content li {
    width: 100%;
    padding: 5px 15px 0 15px;
    height: 50px;
    line-height: 20px;
    position: relative;
    list-style-type: none;
    border-bottom: solid 1px #ebeef5;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    cursor: pointer;
  }
  .lesson-cate-content li p {
    margin: 0px;
    font-size: 12px;
    color: #999;
  }
  .lesson-cate-content li p:first-child {
    font-size: 14px;
    color: #333;
  }
  .lesson-cate-content li p.stage-text{
    margin-top:-5px;
    padding-left:17px;
    line-height: 50px;
  }
  .lesson-cate-content li span.span-len {
    position: absolute;
    font-size: 14px;
    right: 30px;
    top: 13px;
    color: #666;
  }
  .lesson-cate-content li span.span-icon{
    position:absolute;
    right:10px;
    display: inline-block;
    top:13px;
    font-size:14px;
    color:#ed8a94;
  }
  .lesson-cate-content .plus-div{
    text-align:center;
  }
  .lesson-cate-content .plus-btn{
    margin:30px auto 20px;
    background-color:#ed8a94;
    color:#fff;
    border:0;
    font-size:16px;
    width:180px;
  }
  .lesson-cate-content li:hover {
    background-color: #eee;
  }
  .lesson-cate-content li:last-child {
    border-bottom: none;
  }
  .lesson-cate-content li.active {
    background-color: #eee;
  }
  .input-width{
    width:80%;
  }
</style>
<script>
  import { getLessonCate, getLessonStageOne, getLessonStageTwo, addStageOne, deleteStageOne, updateStageOne, addStageTwo, deleteStageTwo, updateStageTwo } from '@/api/science'
  export default{
    data() {
      return {
        cateList: [],
        firstStageList: [],
        secondStageList: [],
        class_2_id: '',
        class_3_id: ''
      }
    },
    created() {
      this.getLessonCate()
    },
    methods: {
      // 课程分类列表
      getLessonCate() {
        getLessonCate().then(response => {
          this.cateList = response.data
          if (this.cateList !== 0) {
            this.class_2_id = this.cateList[0].class_2_id
            this.getLessonStageOne()
          }
        })
      },
      // 一级阶段列表
      getLessonStageOne() {
        getLessonStageOne({ class_2_id: this.class_2_id }).then(response => {
          this.firstStageList = response.data
          if (this.firstStageList.length !== 0) {
            for (var item of this.firstStageList) {
              item.editFlag = false
              item.addFlag = false
              item.closeFlag = false
            }
            this.class_3_id = this.firstStageList[0].id
            this.getLessonStageTwo()
          } else {
            this.secondStageList = []
          }
        })
      },
      // 二级分类列表
      getLessonStageTwo() {
        getLessonStageTwo({ class_3_id: this.class_3_id }).then(response => {
          this.secondStageList = response.data
          if (this.secondStageList.length !== 0) {
            for (var item of this.secondStageList) {
              item.editFlag = false
              item.addFlag = false
              item.closeFlag = false
            }
          }
        })
      },
      changeCate(id) {
        this.class_2_id = id
        this.class_3_id = ''
        this.getLessonStageOne()
      },
      changeFirst(id) {
        this.class_3_id = id
        this.getLessonStageTwo()
      },
      // 新增一级阶段
      addFirstStage() {
        var len = this.firstStageList.length
        if (len !== 0) {
          if (this.firstStageList[len - 1].class_name === '') {
            this.$message({
              message: '请输入阶段名称',
              type: 'warning'
            })
          } else {
            this.firstStageList.push({ 'id': '', 'class_name': '', 'addFlag': true, 'editFlag': false, 'closeFlag': true })
          }
        } else {
          this.firstStageList.push({ 'id': '', 'class_name': '', 'addFlag': true, 'editFlag': false, 'closeFlag': true })
        }
      },
      // 新增二级阶段
      addSecondStage() {
        var len = this.secondStageList.length
        if (len !== 0) {
          if (this.secondStageList[len - 1].class_name === '') {
            this.$message({
              message: '请输入阶段名称',
              type: 'warning'
            })
          } else {
            this.secondStageList.push({ 'id': '', 'class_name': '', 'addFlag': true, 'editFlag': false, 'closeFlag': true })
          }
        } else {
          this.secondStageList.push({ 'id': '', 'class_name': '', 'addFlag': true, 'editFlag': false, 'closeFlag': true })
        }
      },
      // 修改
      handleFirstName(index, item) {
        item.editFlag = true
        item.closeFlag = true
        this.$set(this.firstStageList, index, item)
      },
      updateFirstName(index, item) {
        if (item.class_name.trim() === '') {
          item.class_name = ''
        } else {
          // 修改一级阶段
          item.editFlag = false
          item.closeFlag = false
          this.$set(this.firstStageList, index, item)
          updateStageOne(Object.assign({}, { 'class_2_id': this.class_2_id, 'class_3_id': item.id, 'class_3_name': item.class_name })).then(response => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          })
        }
      },
      addFirstName(index, item) {
        if (item.class_name.trim() === '') {
          item.class_name = ''
        } else {
          // 新增一级阶段
          item.addFlag = false
          item.closeFlag = false
          this.$set(this.firstStageList, index, item)
          addStageOne(Object.assign({}, { 'class_2_id': this.class_2_id, 'class_3_name': item.class_name })).then(response => {
            console.log(response.data.id)
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            item.id = response.data.id
            if (this.firstStageList.length === 1) {
              this.class_3_id = response.data.id
            }
          })
        }
      },
      // 删除一级阶段
      deleteFirstName(index, item) {
        if (item.id !== '') {
          deleteStageOne(Object.assign({}, { 'class_3_id': item.id })).then(response => {
            this.firstStageList.splice(index, 1)
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
        } else if (item.id === '') {
          this.firstStageList.splice(index, 1)
        }
      },
      // 修改
      handleSecondName(index, item) {
        item.editFlag = true
        item.closeFlag = true
        this.$set(this.secondStageList, index, item)
      },
      updateSecondName(index, item) {
        if (item.class_name.trim() === '') {
          item.class_name = ''
        } else {
          // 修改二级阶段
          item.editFlag = false
          item.closeFlag = false
          this.$set(this.secondStageList, index, item)
          updateStageTwo(Object.assign({}, { 'class_3_id': this.class_3_id, 'class_4_id': item.id, 'class_4_name': item.class_name })).then(response => {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          })
        }
      },
      addSecondName(index, item) {
        if (this.class_3_id !== '') {
          if (item.class_name.trim() === '') {
            item.class_name = ''
          } else {
            // 新增二级阶段
            item.addFlag = false
            item.closeFlag = false
            this.$set(this.secondStageList, index, item)
            addStageTwo(Object.assign({}, { 'class_3_id': this.class_3_id, 'class_4_name': item.class_name })).then(response => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              item.id = response.data.id
            })
          }
        } else {
          this.$message({
            message: '请先创建一级阶段',
            type: 'warning'
          })
        }
      },
      // 删除二级阶段
      deleteSecondName(index, item) {
        if (item.id !== '') {
          deleteStageTwo(Object.assign({}, { 'class_4_id': item.id })).then(response => {
            this.secondStageList.splice(index, 1)
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
        } else if (item.id === '') {
          this.secondStageList.splice(index, 1)
        }
      }
    }
  }
</script>
